【Day 23】淺入淺出 Rails with Vue - Vue 的基本概念 - 22 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 23

Modern Web

淺入淺出 Rails with Vue系列第 23 篇

【Day 23】淺入淺出 Rails with Vue - Vue 的基本概念 - 22

14th鐵人賽

k5953837

團隊猴子戰隊

2022-09-27 23:16:20

677 瀏覽

分享至

前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

【Day 01】淺入淺出 Rails with Vue - Before We Begin

【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1

【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2

【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3

【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4

【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5

【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6

【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7

【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8

【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9

【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10

【Day 12】淺入淺出 Rails with Vue - Vue 的基本概念 - 11

【Day 13】淺入淺出 Rails with Vue - Vue 的基本概念 - 12

【Day 14】淺入淺出 Rails with Vue - Vue 的基本概念 - 13

【Day 15】淺入淺出 Rails with Vue - Vue 的基本概念 - 14

【Day 16】淺入淺出 Rails with Vue - Vue 的基本概念 - 15

【Day 17】淺入淺出 Rails with Vue - Vue 的基本概念 - 16

【Day 18】淺入淺出 Rails with Vue - Vue 的基本概念 - 17

【Day 19】淺入淺出 Rails with Vue - Vue 的基本概念 - 18

【Day 20】淺入淺出 Rails with Vue - Vue 的基本概念 - 19

【Day 21】淺入淺出 Rails with Vue - Vue 的基本概念 - 20

Component Registration

Component Names

Name Casing

在定義 Component Name 的時候有兩種方式，一種是使用 kebab-case，另一種是使用 PascalCase。

with kebab-case

kebab-case：使用連字符來分隔單字，例如：my-component-name。

Vue.component('my-component-name', { /* ... */ })

with PascalCase

PascalCase：使用大寫字母來分隔單字，例如：MyComponentName。

Vue.component('MyComponentName', { /* ... */ })

當我們使用 PascalCase 定義時，你可以在引用 custom element 時使用 kebab-case，也可以使用 PascalCase，
也就代表你可以使用 <my-component-name> 或 <MyComponentName> 來引用。
但是 kebab-case 的 custom element 只能使用 kebab-case 來引用。

Global Registration

到目前為止的範例中，我們都是使用 Vue.component 來註冊 component，這種方式稱為全域註冊，也就是說這個 component 會在整個 Vue 的範圍內都可以使用。

Vue.component('my-component-name', {
  // ... options ...
})

以下這些範例都是使用全域註冊的方式，也就代表這些 components 可以在任何 root Vue instance (new Vue) 的 template 中使用。

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

例如以下範例中，我們可以在 #app 的 template 中使用 <component-a>、<component-b>、<component-c> 這三個 components。

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

除了在 root Vue instance 的 template 中使用，這三個 components 也可以在彼此的 template 中互相使用。

Local Registration

不管是哪種語言，如果非必要，都不建議使用全域 component，因為全域變數會造成命名衝突，而且也不好管理。
假如我們使用像是 Webpack 這種 build tool，就算我們沒有使用某些全域 component，也還是會被打包進去。
這樣就會增加使用者下載的檔案大小，也會增加瀏覽器解析的時間。